<template>
  <div class="single-pie">
    <div ref="axis" style="width: 440px; height: 275px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "当日妥投", value: 100 },
        { name: "2日妥投", value: 200 },
        { name: "3日妥投", value: 300 },
        { name: "4日及以上妥投", value: 500 },
      ],
    };
  },
  mounted() {
    this.setoption();
  },
  methods: {
    setoption() {
      var myChartDom = this.$refs.axis;
      var myChart = this.$echarts.init(myChartDom);
      var option = {
        backgroundColor: "rgba(43, 51, 59,1) ",
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{b}: {c} ({d}%)"
        // },
        legend: {
          orient: "vertical",
          x: "5%",
          y: "10%",
          icon: "pin",
          itemWidth: 14,
          itemHeight: 5,
          textStyle: {
            color: "#2A9DFF",
            fontSize: "16",
          },
          // data: ["当日妥投", "2日妥投", "3日妥投", "4日及以上妥投"]
        },
        color: ["#45BCFF ", "#00FFF5 ", "#B664FF", "#2575FF"],
        series: [
          {
            name: "访问来源",
            type: "pie",

            radius: ["50%", "70%"],
            center: ["65%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                formatter: ["{bt|{b}}", "{bs|{c}}", "{bn|{d}%}"].join("\n"),
                rich: {
                  bt: {
                    fontSize: "16",
                    lineHeight: "20",
                  },
                  bs: {
                    fontSize: "24",
                    lineHeight: "24",
                  },
                  bn: {
                    fontSize: "18",
                    lineHeight: "18",
                  },
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.list,
          },
        ],
      };
      var currentIndex = -1;
      clearInterval(this.times);
      this.times = setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 6000);
      myChart.clear();
      myChart.setOption(option, true);
      // myChart.dispose();
    },
  },
};
</script>

<style lang="scss" scoped>
.single-pie {
  width: 1200px;
  margin: 0 auto;
}
</style>